<template>
  <!-- <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input> -->
  <el-table :data="propslist.list" style="width: 100%">
    <el-table-column prop="id" label="Data" />
    <el-table-column prop="apartmentNumber" label="住户号码" />
    <el-table-column prop="month" label="账单月份" />
    <el-table-column prop="waterUsage" label="水费使用量" />
    <el-table-column prop="waterUnitPrice" label="水费单价" />
    <el-table-column prop="electricityUsage" label="电费使用量" />
    <el-table-column prop="electricityUnitPrice" label="电费单价" />
    <el-table-column prop="totalPrice" label="总价" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          size="small"
          style="margin-left: 16px"
          @click="handleEdit(scope.row)"
          >付款</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-drawer
    v-model="drawer"
    title="I am the title"
    :with-header="false"
    direction="btt"
    :size="650"
  >
    <img src="@/assets/img/666.jpg" alt="" />
  </el-drawer>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from "vue";

interface User {
  id: string;
  apartmentNumber: string;
  month: string;
  waterUsage: number;
  waterUnitPrice: number;
  electricityUsage: number;
  electricityUnitPrice: number;
  totalPrice: number;
}

interface PList {
  list: User[];
}

export default defineComponent({
  props: {
    propslist: {
      type: Object as any,
      default: () => ({
        list: [],
      }),
    },
  },
  setup(props) {
    let state = reactive({
      drawer: false,
    });

    const handleEdit = (row: User) => {
      console.log("Edit", row.totalPrice);
      state.drawer = true;
      // TODO: 实现修改数据的逻辑
    };
    const handleDelete = (index: number) => {
      console.log("Delete", index);
      const list = [...props.propslist.list];
      list.splice(index, 1);
      props.propslist.list = list;
    };

    return {
      handleEdit,
      handleDelete,
      ...toRefs(state),
    };
  },
});
</script>
